<style>
    #traffic_permit_edit_frame #owner_info_frame {
        height: 200px;
        border-radius:4px;
        background: #eeeeee;
    }
</style>
<section id="traffic_permit_edit_frame">
    <article class="lonix step three" style="width: 100%">
        <div class="step-heads">
            <div class="step-head" data-no="1">
                <div class="step-title">开卡基本信息</div>
                <div class="step-desc"></div>
            </div>
            <div class="step-head" data-no="2">
                <div class="step-title">支付开卡费用</div>
                <div class="step-desc"></div>
            </div>
            <div class="step-head" data-no="3">
                <div class="step-title">完成开卡</div>
                <div class="step-desc"></div>
            </div>
        </div>
        <div class="step-content">
            <div class="step-content-item" data-no="1">
                <details id="owner_info_frame">

                </details>
            </div>
            <div class="step-content-item" data-no="2">

            </div>
            <div class="step-content-item" data-no="3">

            </div>
        </div>
    </article>
</section>
<script>
    $('.step-head').bind('click', function(e) {
        if ($(this).hasClass('active')) {
            return;
        }
        var no = $(this).attr('data-no');
        $('.step-head').removeClass('active');
        $('.step-head').removeClass('completed');

        $(this).prevAll().addClass('completed');
        $(this).addClass('active');
        $('.step-content .step-content-item').fadeOut(200);
        $('.step-content .step-content-item[data-on="'+no+'"]').fadeIn(200);
    });
    if ($('.step-head.active').length < 1) {
        $('.step-head:eq(0)').click();
    }
</script>